import React, { Component } from 'react';
class Counters extends Component {
    constructor(props) {
        super(props);
    }
    state = {
        // 接受父级传递过来的value,并同步到子级num
        num: this.props.value
    }
    // 设置 加减 事件
    setnum(val) {
        if (val < this.props.min) {
            val = this.props.min
        } else if (val > this.props.max) {
            val = this.props.min
        }
        this.setState({ num: val }, () => {
            /*
            定义：子传父事件
            val:传过去
            */
            this.props.onChang(val)
        })
    }
    render() {
        return (<div>
            {/* 实参：现有数 - 加减幅度数 */}
            <button onClick={() => { this.setnum(this.state.num - this.props.step) }}>-</button>
            <input value={this.state.num} onChange={(e) => { this.setnum(Number(e.target.value)) }} />
            <button onClick={() => { this.setnum(this.state.num + this.props.step) }}>+</button>
        </div>);
    }
}

export default Counters;

/*
组件需要接受父组件的值 props
num  ： 中间value
min  :  最小值
max  :  最大值
step :  加减幅度数
*/ 